<script lang="ts" setup>
import type { EChartsOption, PieSeriesOption } from 'echarts'

import basicPie from '@/components/basicEcharts/components/basicPie.vue'

const data = ref<PieSeriesOption['data']>()
const options = computed(() => {
  return {
    backgroundColor: '#0A2E5D',
    series: [
      {
        name: '交通方式',
        type: 'pie',
        // radius: [105, 109],
        radius: '30%',
        itemStyle: {
          label: {
            show: true,
            position: 'outside',
            color: '#ddd',
            formatter: function () {
              return '交通方式1：'
            }
          },
          labelLine: {
            length: 30,
            length2: 400,
            show: true,
            color: '#00ffff'
          }
        },
        data: data.value
      }
    ]
  } as EChartsOption
})

setTimeout(() => {
  data.value = [
    { value: 500, name: '电子产品', emphasis: { itemStyle: { borderColor: 'red' } } },
    { value: 310, name: '服装' },
    { value: 274, name: '化妆品' },
    { value: 400, name: '家居' }
  ]
}, 300)

function clickItem(p: any) {
  console.log(p)
}
</script>

<template>
  <div style="height: 30vh; width: 30vw">
    <basicPie
      :data="data"
      is-loop-play
      :loop-gap="1000"
      :options="options"
      @click-item="clickItem"
    ></basicPie>
  </div>
</template>
